<template>
  <d2-container>
    <el-card shadow="never" class="d2-mb">
      <el-form
        class="filter-container"
        ref="cusForm"
        :model="cusForm"
        label-width="85px"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="客商名称">
             <el-input v-model="cusForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="类型">
                 <el-select  clearable v-model="cusForm.type" class="filter-item" placeholder="请选择">
              <el-option label="客户" value="0"></el-option>
              <el-option label="供应商" value="1"></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态">
                <el-select  clearable v-model="cusForm.status" class="filter-item" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="停用" value="0"></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="是否黑名单">
                <el-select  clearable v-model="cusForm.black" class="filter-item" placeholder="请选择">
              <el-option label="黑名单" value="1"></el-option>
              <el-option label="正常" value="0"></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
          <el-button type="primary" size="small" style='margin-top:3px;' @click="handle_customerChange">
            <d2-icon name="search" /> 查询
          </el-button>
        </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="mb">
      <el-button type="default" size="small" @click="add_customer">
        <d2-icon name="plus" />
        新增
      </el-button>
      <el-button type="default" size="small" @click="edit_customer">
        <d2-icon name="edit" />
        修改
      </el-button>
      <el-button type="default" size="small" icon="el-icon-delete" @click="del_customer">
        删除
      </el-button>
       <el-upload
            class="upload-btn"
            :action="uploadUrl"
            accept=".xls, .xlsx"
            :on-success="handleAvatarSuccess"
            :on-progress="uploadProgress"
            :on-error="handleUploadError"
            :show-file-list="false" style="display:inline-block;margin:0 10px;">
          <el-button type="default" size="small">
            <d2-icon name="download" />
            导入
          </el-button>
          </el-upload>
      <el-button type="default" size="small" @click="handleFormSubmit">
        <d2-icon name="upload" />
        导出
      </el-button>
      <el-button type="default" size="small" @click="qycustomer">
        <d2-icon name="unlock" />
        启用
      </el-button>
      <el-button type="default" size="small" @click="qycustomer">
        <d2-icon name="unlock-alt" />
        停用
      </el-button>
      <el-button
        type="default"
        size="small"
        @click="handleCleanRefreshCurrent"
      >
        <d2-icon name="refresh"/>
        刷新
      </el-button>
    </div>
    <el-card shadow="never" class="d2-mb">
      <el-table
        :data="customertableData"
        border :header-cell-style="{ background: '#eef1f6' }"
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40"> </el-table-column>
        <!-- <el-table-column type="index" label="序号" width="50">
        </el-table-column> -->
         <el-table-column type="expand" width="40">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="客商全称">
                  <span>{{ props.row.full_name }}</span>
                </el-form-item>
                <el-form-item label="抬头名称">
                  <span>{{ props.row.h_name }}</span>
                </el-form-item>
                <el-form-item label="证件编号">
                  <span>{{ props.row.certificate_no }}</span>
                </el-form-item>
                <el-form-item label="注册日期">
                  <span>{{ props.row.certificate_start }}</span>
                </el-form-item>
                 <el-form-item label="失效日期">
                  <span>{{ props.row.certificate_end }}</span>
                </el-form-item>
                <el-form-item label="纳税识别号">
                  <span>{{ props.row.invoice_no }}</span>
                </el-form-item>
                <el-form-item label="开户行">
                  <span>{{ props.row.bank }}</span>
                </el-form-item>
                 <el-form-item label="账户">
                  <span>{{ props.row.bank_account }}</span>
                </el-form-item>
                <el-form-item label="电话">
                  <span>{{ props.row.contact_cell }}</span>
                </el-form-item>
                 <el-form-item label="职位">
                  <span>{{ props.row.contact_pos }}</span>
                </el-form-item>
              </el-form>
            </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" sortable :formatter="formatterstatus"></el-table-column>
        <el-table-column
          prop="black"
          label="是否黑名单" width="115"
           :formatter="formatterBlock"
          sortable>
        </el-table-column>
        <el-table-column
          prop="name"
          label="客商名称" width="105"
          sortable
        ></el-table-column>
        <el-table-column
          prop="p_name"
          label="所属上级" width="105"
          sortable
        ></el-table-column>
        <el-table-column
          prop="enterprise_type"
          label="企业类型" width="105"
          sortable
           :formatter="formatterenType"
        ></el-table-column>
        <el-table-column
          prop="trade_product"
          label="贸易品名" width="105"
          sortable
        ></el-table-column>
        <el-table-column
          prop="province"
          label="所属地区" width="105"
          sortable
        ></el-table-column>
        <el-table-column
          prop="address"
          label="通讯地址" width="105"
          sortable
        ></el-table-column>
        <el-table-column
          prop="contact"
          label="联系人" width="105"
          sortable
        ></el-table-column>
        <el-table-column
          prop="contact_cell"
          label="联系方式" width="105"
          sortable
        ></el-table-column>
         <el-table-column
          prop="enterprise_prop"
          label="企业性质" width="105"
          :formatter="formatterenProp"
          sortable
        ></el-table-column>
         <el-table-column
          prop="type"
          label="类型"
           :formatter="formattertype"
          sortable
        ></el-table-column>
         <el-table-column
          prop="currency_name"
          label="交易币种" width="105"
          sortable
        ></el-table-column>
         <el-table-column
          prop="certificate"
          label="证件类型" width="105"
           :formatter="formattercer"
          sortable
        ></el-table-column>
       </el-table>
    </el-card>
      <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="cusForm.currentPage"
      :page-size="cusForm.pageSize"
      layout="total, prev, pager, next"
      :total="cusForm.totalPage"
    >
    </el-pagination> -->
    <!-- 新增 -->
    <el-dialog :visible.sync="add_customerVisible" title="客商信息-新增" width="90%">
      <div>
    <div class="mb">
      <el-button type="default" size="small" @click="addRow">
        <d2-icon name="plus" />
        增行
      </el-button>
      <el-button type="default" size="small" icon="el-icon-delete" @click="delData">
        删行
      </el-button>
    </div>
    <el-form label-position="right" status-icon :rules="rules" :model="addcustomertableData" ref="ruleForm">
    <el-table :data="addcustomertableData" ref="table" tooltip-effect="dark" border stripe style="width: 100%" :row-class-name="tableRow"
        :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }" @selection-change='selectRow' highlight-current-row>
      <el-table-column type="selection" width="40" align="center"></el-table-column>
      <el-table-column label="序号"  type="index" width="55" align="center"></el-table-column>
      <el-table-column label="客商名称" width="150">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.name'" :rules="rules.name">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.name"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="客商全称" width="150">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.full_name'" :rules="rules.full_name">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.full_name"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="英文全称" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.e_name'" :rules="rules.e_name">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.e_name"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="抬头名称" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.h_name'" :rules="rules.h_name">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.h_name"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="所属上级" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.p_name'" :rules="rules.p_name">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.p_name"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="企业性质" width="145">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.enterprise_prop'" :rules="rules.enterprise_prop">
          <el-select  clearable v-model="scope.row.enterprise_prop" placeholder="请选择" filterable allow-create>
			          	   <el-option label="生产型" value="1"></el-option>
                     <el-option label="贸易型" value="2"></el-option>
                     <el-option label="生产销售代表" value="3"></el-option>
                     <el-option label="其他" value="4"></el-option>
			          </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="企业类型" width="110">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.enterprise_type'" :rules="rules.enterprise_type">
          <el-select  clearable v-model="scope.row.enterprise_type" placeholder="请选择" filterable allow-create>
			    	   <el-option label="央企" value="1"></el-option>
               <el-option label="国企" value="2"></el-option>
               <el-option label="民营" value="3"></el-option>
               <el-option label="合资" value="4"></el-option>
               <el-option label="外企" value="5"></el-option>
			    </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
            <el-form-item :prop="scope.$index + '.status'" :rules="rules.status">
            <el-select  clearable v-model="scope.row.status" placeholder="请选择" filterable allow-create>
			    	   <el-option label="停用" value="0"></el-option>
               <el-option label="启用" value="1"></el-option>
			    </el-select>
            </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="是否黑名单" width="110">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.black'" :rules="rules.black">
           <el-select  clearable v-model="scope.row.black" placeholder="请选择" filterable allow-create>
			    	   <el-option label="正常" value="0"></el-option>
               <el-option label="黑名单" value="1"></el-option>
			    </el-select>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="类型" width="110">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.type'" :rules="rules.black">
           <el-select  clearable v-model="scope.row.type" placeholder="请选择" filterable allow-create>
			    	   <el-option label="客户" value="0"></el-option>
               <el-option label="供应商" value="1"></el-option>
			    </el-select>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="贸易品名" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.trade_product'" :rules="rules.trade_product">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.trade_product"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="交易币种" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.currency'" :rules="rules.currency">
              <el-input
            placeholder="请输入内容"
            v-model="scope.row.currency "
          ></el-input>
               <!-- <el-select
                v-model="scope.row.currency"
                placeholder="请选择"
                style="width:100%;"
              >
               <el-option
                         v-for="item in selectCurrencyList"
                         :key="item.currency"
                         :label="item.name"
                         :value="item.currency"
                 >
                     <span style="float: left">{{item.name}}</span>
                 </el-option>
              </el-select> -->
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="证件类型" width="125">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.certificate'" :rules="rules.certificate">
              <el-select  clearable v-model="scope.row.certificate" placeholder="请选择" filterable allow-create>
			        	   <el-option label="身份证" value="0"></el-option>
                   <el-option label="护照" value="1"></el-option>
                   <el-option label="营业执照" value="2"></el-option>
			        </el-select>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="sign" label="证件编号" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.certificate_no'" :rules="rules.certificate_no">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.certificate_no"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="注册日期" sortable width="160">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.certificate_start'" :rules="rules.certificate_start">
         <el-date-picker v-model="scope.row.certificate_start" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width:100%;padding-right:0;"></el-date-picker>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="失效日期" sortable width="160">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.certificate_end'" :rules="rules.certificate_end">
                  <el-date-picker v-model="scope.row.certificate_end" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width:100%;padding-right:0;"></el-date-picker>
           </el-form-item>
        </template>
      </el-table-column>
        <el-table-column label="所属地区" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.province'" :rules="rules.province">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.province"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="通讯地址" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.address'" :rules="rules.address">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.address"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="纳税识别号" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.invoice_no'" :rules="rules.invoice_no">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.invoice_no"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="开户行" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.bank'" :rules="rules.bank">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.bank"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="账户" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.bank_account'" :rules="rules.bank_account">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.bank_account"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="联系人" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.contact'" :rules="rules.contact">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.contact"
          ></el-input>
        </el-form-item>
         </template>
      </el-table-column>
      <el-table-column label="联系方式" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.contact_cell'" :rules="rules.contact_cell">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.contact_cell"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="职位" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.contact_pos'" :rules="rules.contact_pos">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.contact_pos"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    </el-form>
  </div>
      <span span slot="footer" class="dialog-footer">
        <el-button @click="add_customerVisible = false">取消</el-button>
        <el-button type="primary" @click="handle_addcustomer('ruleForm')">保存</el-button
        >
      </span>
    </el-dialog>
      <!-- 修改 -->
    <el-dialog :visible.sync="edit_customerVisible" title="客商信息-修改" width="90%">
      <div>
    <el-form label-position="right" status-icon :rules="rules" :model="editcustomertableData" ref="ruleForm">
    <el-table :data="editcustomertableData" tooltip-effect="dark" border stripe style="width: 100%" :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }">
      <el-table-column type="selection" width="40" align="center"></el-table-column>
      <el-table-column label="序号"  type="index" width="55" align="center"></el-table-column>
      <el-table-column label="客商名称" width="150">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.name'" :rules="rules.name">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.name"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="客商全称" width="150">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.full_name'" :rules="rules.full_name">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.full_name"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="英文全称" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.e_name'" :rules="rules.e_name">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.e_name"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="抬头名称" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.h_name'" :rules="rules.h_name">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.h_name"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="所属上级" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.p_name'" :rules="rules.p_name">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.p_name"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="企业性质" width="145">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.enterprise_prop'" :rules="rules.enterprise_prop">
          <el-select  clearable v-model="scope.row.enterprise_prop" placeholder="请选择" filterable allow-create>
			          	   <el-option label="生产型" value="1"></el-option>
                     <el-option label="贸易型" value="2"></el-option>
                     <el-option label="生产销售代表" value="3"></el-option>
                     <el-option label="其他" value="4"></el-option>
			          </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="企业类型" width="110">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.enterprise_type'" :rules="rules.enterprise_type">
          <el-select  clearable v-model="scope.row.enterprise_type" placeholder="请选择" filterable allow-create>
			    	   <el-option label="央企" value="1"></el-option>
               <el-option label="国企" value="2"></el-option>
               <el-option label="民营" value="3"></el-option>
               <el-option label="合资" value="4"></el-option>
               <el-option label="外企" value="5"></el-option>
			    </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
            <el-form-item :prop="scope.$index + '.status'" :rules="rules.status">
            <el-select  clearable v-model="scope.row.status" placeholder="请选择" filterable allow-create>
			    	   <el-option label="停用" value="0"></el-option>
               <el-option label="启用" value="1"></el-option>
			    </el-select>
            </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="是否黑名单" width="110">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.black'" :rules="rules.black">
           <el-select  clearable v-model="scope.row.black" placeholder="请选择" filterable allow-create>
			    	   <el-option label="正常" value="0"></el-option>
               <el-option label="黑名单" value="1"></el-option>
			    </el-select>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="类型" width="110">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.type'" :rules="rules.black">
           <el-select  clearable v-model="scope.row.type" placeholder="请选择" filterable allow-create>
			    	   <el-option label="客户" value="0"></el-option>
               <el-option label="供应商" value="1"></el-option>
			    </el-select>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="贸易品名" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.trade_product'" :rules="rules.trade_product">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.trade_product"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="交易币种" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.currency'" :rules="rules.currency">
               <el-select
                v-model="scope.row.currency"
                placeholder="请选择"
                style="width:100%;"
              >
               <el-option
                         v-for="item in selectCurrencyList"
                         :key="item.currency"
                         :label="item.name"
                         :value="item.currency"
                 >
                     <span style="float: left">{{item.name}}</span>
                     <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.currency}}</span> -->
                 </el-option>
              </el-select>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="证件类型" width="125">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.certificate'" :rules="rules.certificate">
              <el-select  clearable v-model="scope.row.certificate" placeholder="请选择" filterable allow-create>
			        	   <el-option label="身份证" value="0"></el-option>
                   <el-option label="护照" value="1"></el-option>
                   <el-option label="营业执照" value="2"></el-option>
			        </el-select>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="sign" label="证件编号" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.certificate_no'" :rules="rules.certificate_no">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.certificate_no"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="注册日期" sortable width="160">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.certificate_start'" :rules="rules.certificate_start">
         <el-date-picker v-model="scope.row.certificate_start" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width:100%;padding-right:0;"></el-date-picker>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="失效日期" sortable width="160">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.certificate_end'" :rules="rules.certificate_end">
                  <el-date-picker v-model="scope.row.certificate_end" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width:100%;padding-right:0;"></el-date-picker>
           </el-form-item>
        </template>
      </el-table-column>
        <el-table-column label="所属地区" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.province'" :rules="rules.province">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.province"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="通讯地址" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.address'" :rules="rules.address">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.address"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="纳税识别号" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.invoice_no'" :rules="rules.invoice_no">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.invoice_no"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="开户行" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.bank'" :rules="rules.bank">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.bank"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="账户" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.bank_account'" :rules="rules.bank_account">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.bank_account"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="联系人" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.contact'" :rules="rules.contact">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.contact"
          ></el-input>
        </el-form-item>
         </template>
      </el-table-column>
      <el-table-column label="联系方式" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.contact_cell'" :rules="rules.contact_cell">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.contact_cell"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="职位" width="150">
        <template slot-scope="scope">
           <el-form-item :prop="scope.$index + '.contact_pos'" :rules="rules.contact_pos">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.contact_pos"
          ></el-input>
           </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    </el-form>
  </div>
      <span span slot="footer" class="dialog-footer">
        <el-button @click="edit_customerVisible = false">取消</el-button>
        <el-button type="primary" @click="editcustomer('ruleForm')">保存</el-button
        >
      </span>
    </el-dialog>
    <!-- 导入 -->
    <el-dialog :visible.sync="drcustomerVisible" title="导入客商信息" width="90%">
      <div>
   <el-table :data="drcustomertableData" ref="table" tooltip-effect="dark" border stripe style="width: 100%" :row-class-name="tableRow"
        :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }" highlight-current-row>
      <el-table-column label="序号"  type="index" width="45" align="center"></el-table-column>
      <el-table-column label="客商名称" prop="name">
      </el-table-column>
      <el-table-column label="客商全称" prop="full_name">
      </el-table-column>
      <el-table-column label="英文全称" prop="e_name">
      </el-table-column>
      <el-table-column label="抬头名称" prop="h_name">
      </el-table-column>
      <el-table-column label="所属上级" prop="p_name">
      </el-table-column>
      <el-table-column label="企业性质" prop="enterprise_prop">
      </el-table-column>
      <el-table-column label="企业类型" prop="enterprise_type">
      </el-table-column>
      <el-table-column label="状态" prop="status">
      </el-table-column>
      <el-table-column label="是否黑名单" prop="black">
      </el-table-column>
      <el-table-column label="类型" prop="type">
      </el-table-column>
      <el-table-column label="贸易品名" prop="trade_product">
      </el-table-column>
      <el-table-column label="交易币种" prop="currency">
      </el-table-column>
      <el-table-column label="证件类型" prop="certificate">
      </el-table-column>
      <el-table-column label="证件编号" prop="certificate_no">
      </el-table-column>
      <el-table-column label="注册日期" prop="certificate_start">
      </el-table-column>
      <el-table-column label="失效日期" prop="certificate_end">
      </el-table-column>
        <el-table-column label="所属地区" prop="province">
      </el-table-column>
      <el-table-column label="通讯地址" prop="address">
      </el-table-column>
      <el-table-column label="纳税识别号" prop="invoice_no">
      </el-table-column>
      <el-table-column label="开户行" prop="bank">
      </el-table-column>
      <el-table-column label="账户" prop="bank_account">
      </el-table-column>
      <el-table-column label="联系人" prop="contact">
      </el-table-column>
      <el-table-column label="联系方式" prop="contact_cell">
      </el-table-column>
      <el-table-column label="职位" prop="contact_pos">
      </el-table-column>
    </el-table>
  </div>
      <span span slot="footer" class="dialog-footer">
        <el-button @click="drcustomerVisible = false">取消</el-button>
        <el-button type="primary" @click="drcap">保存</el-button
        >
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
import { concustomer, addcustomer, conCurrency } from '../../../api/url_lcc';
export default {
  //客商信息
  name: "merchants_information",
  data() {
    return {
      // 导入
      uploadUrl:`/user/lead/`,
      drcustomerVisible: false,
      drcustomertableData:[],
      add_customerVisible: false,
      edit_customerVisible: false,
      cusForm: {
        //  page: 1, //当前页
        //   pageSize: 20,
        //   totalPage: 1,
          name:"",  
          type:"", 
          status:"",
          black:"",
      },
      selectlistRow: [],
      rowNum:1,
      row:"",
      customertableData:[],
      addcustomertableData: [],
      editcustomertableData:[],
      ruleForm:{
        name:"",                             
        full_name:"",
        e_name:"",
        h_name:"",
        p_name:"",
        enterprise_prop:"",
        enterprise_type:"",
        status:"",
        black:"",
        type:"",
        trade_product:"",
        currency:"",
        certificate:"",
        certificate_no:"",
        certificate_start:"",
        certificate_end:"",
        province:"",
        address:"",
        invoice_no:"",
        bank:"",
        bank_account:"",
        contact:"",
        contact_cell:"",
        contact_pos:""
        },
      rules:{
          name: [
              { required: true, message: '请输入客商名称', trigger: 'blur' },
            ],
          full_name: [
            { required: true, message: '请输入客商全称', trigger: 'blur' },
          ],
          //  e_name: [
          //     { required: true, message: '请输入英文全称', trigger: 'blur' },
          //   ],
          h_name: [
            { required: true, message: '请输入抬头名称', trigger: 'blur' },
          ],
          //  p_name: [
          //     { required: true, message: '请输入所属上级', trigger: 'blur' },
          //   ],
          // trade_product: [
          //   { required: true, message: '请输入贸易品名', trigger: 'blur' },
          // ],
           certificate_no: [
              { required: true, message: '请输入证件编号', trigger: 'blur' },
            ],
          certificate_start: [
            { required: true, message: '请输入注册日期', trigger: 'blur' },
          ],
           certificate_end: [
              { required: true, message: '请输入失效日期', trigger: 'blur' },
            ],
          // province: [
          //   { required: true, message: '请输入所属地区', trigger: 'blur' },
          // ],
          //  address: [
          //     { required: true, message: '请输入通讯地址', trigger: 'blur' },
          //   ],
          invoice_no: [
            { required: true, message: '请输入纳税识别号', trigger: 'blur' },
          ],
          bank: [
              { required: true, message: '请输入开户行', trigger: 'blur' },
            ],
          bank_account: [
            { required: true, message: '请输入账号', trigger: 'blur' },
          ],
           contact: [
              { required: true, message: '请输入联系人', trigger: 'blur' },
            ],
          contact_cell: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
          ],
          //  contact_pos: [
          //     { required: true, message: '请输入职位', trigger: 'blur' },
          //   ],
          enterprise_prop: [
            { required: true, message: '请选择企业性质', trigger: 'change' },
          ],
          enterprise_type: [
            { required: true, message: '请选择企业类型', trigger: 'change' },
          ],
          status: [
            { required: true, message: '请选择状态', trigger: 'change' },
          ],
          black: [
            { required: true, message: '请选择是否黑名单', trigger: 'change' },
          ],
          type: [
            { required: true, message: '请选择类型', trigger: 'change' },
          ],
          currency: [
            { required: true, message: '请选择交易币种', trigger: 'change' },
          ],
          certificate: [
            { required: true, message: '请选择证件类型', trigger: 'change' },
          ],
      }
    };
  },
  created() {
           this.tabledatas.map(i => {
               i.show = false
               return i
           })
  },
  methods: {
     // 导入
      handleAvatarSuccess (res, file) {
        // this.uploadloading.close();
        console.log(444444,res.result);
        if (res && res.errcode === "1") {
           this.$message({
           message: '导入成功',
           type: 'success',
          })
          this.drcustomerVisible = true;
          this.drcustomertableData = [];
          var data1 = res.result.Sheet1;
          for (var i = 0; i < data1.length; i++) {
            this.drcustomertableData[i] = {
                name: data1[i].客商名称,
                full_name:data1[i].客商全称,
                e_name: data1[i].英文全称,
                h_name: data1[i].抬头全称,
                p_name: data1[i].所属上级,
                enterprise_prop: data1[i].企业性质,
                enterprise_type: data1[i].企业类型,
                status: data1[i].状态,
                black: data1[i].是否黑名单,
                type:data1[i].类型,
                trade_product: data1[i].贸易品名,
                currency: data1[i].交易币种,
                certificate: data1[i].证件类型,
                certificate_no: data1[i].证件编号,
                certificate_start: data1[i].注册日期,
                certificate_end: data1[i].失效日期,
                province: data1[i].所属地区,
                address: data1[i].通讯地址,
                invoice_no: data1[i].纳税识别号,
                bank: data1[i].开户行,
                bank_account: data1[i].账户,
                contact: data1[i].联系人,
                contact_cell: data1[i].联系方式,
                contact_pos: data1[i].职位,
            }
          }
         
        } else {
          this.$message.error(res.msg);
        }
      },
      drcap(){
        var drcustomertableData = [];
        var drcustomertableData = this.drcustomertableData;
        drcustomertableData.forEach(function(item, index) {
          var data1 = item.enterprise_type //企业性质
          var data2 = item.enterprise_prop//  企业类型
          var data3 = item.status// 状态
          var data4 = item.black// 是否黑名单
          var data5 = item.type// 类型
          var data6 = item.certificate// 证件类型
         if (data1 == "央企") {
             item.enterprise_type = '1';
         } else if (data1 == "国企") {
             item.enterprise_type = '2';
         } else if (data1 == "民营") {
             item.enterprise_type = '3';
         } else if (data1 == "合资") {
             item.enterprise_type = '4';
         } else if (data1 == "外企") {
             item.enterprise_type = '5';
         }  
          if (data2 == "生产型") {
             item.enterprise_prop = '1';
         } else if (data2 == "贸易型") {
             item.enterprise_prop = '2';
         } else if (data2 == "生产销售代表") {
             item.enterprise_prop = '3';
         } else if (data2 == "其他") {
             item.enterprise_prop = '4';
         } 
         if (data3 == "停用") {
             item.status = '0';
         } else if (data3 == "启用") {
             item.status = '1';
         }
          if (data4 == "正常") {
             item.black = '0';
         } else if (data4 == "黑名单") {
             item.black = '1';
         }
          if (data5 == "客户") {
             item.type = '0';
         } else if (data5 == "供应商") {
             item.type = '1';
         }
          if (data6 == "身份证") {
             item.certificate = '0';
         } else if (data6 == "护照") {
             item.certificate = '1';
         } else if (data6 == "营业执照") {
             item.certificate = '2';
         } 
       })
        let params = { 
          "operation":"ADD",
          customer_data:this.drcustomertableData
        };
        addcustomer(params).then(res => {
            if (res.errcode == "1") {
                this.$message.success(res.result);
                this.drcustomerVisible = false;
                this.handle_customerChange();
            } else {
                this.$message.error(res.msg);
            }
             });
      },
    handleChange(value) {
        console.log(555,first.value);
      },
    // 状态
    formatterstatus(row,column){
        return row.status == "0"?'停用':'启用'
    },
     // 类型
    formattertype(row,column){
        return row.type == "0"?'客户':'供应商'
    },
    // 是否黑名单
    formatterBlock(row,column){
        return row.black == "0"?'正常':'黑名单'
    },
    // 企业类型
    formatterenType(row, column) {
         if (row.enterprise_type == "1") {
             return '央企';
         } else if (row.enterprise_type == "2") {
             return '国企';
         } else if (row.enterprise_type == "3") {
             return '民营';
         } else if (row.enterprise_type == "4") {
             return '合资';
         } else if (row.enterprise_type == "5") {
             return '外企';
         }
     },
    //  企业性质
    formatterenProp(row, column) {
         if (row.enterprise_prop == "1") {
             return '生产型';
         } else if (row.enterprise_prop == "2") {
             return '贸易型';
         } else if (row.enterprise_prop == "3") {
             return '生产销售代表';
         } else if (row.enterprise_prop == "4") {
             return '其他';
         }
     },
    //  证件类型
    formattercer(row, column) {
         if (row.certificate == "0") {
             return '身份证';
         } else if (row.certificate == "1") {
             return '护照';
         } else if (row.certificate == "2") {
             return '营业执照';
         } 
     },
    //  
     // 行内编辑
    handleCellDataChange({ rowIndex, key, value, row }) {
      debbuger;
      console.log(rowIndex);
      console.log(key);
      console.log(value);
      console.log(row);
    },

    // 单选
    handleCurrentChange(currentRow, oldCurrentRow) {
      console.log(currentRow);
      console.log(oldCurrentRow);
    },
    // 多选
    handleSelectionChange(val) {
       this.multipleSelection = val;
       console.log('多选1',this.multipleSelection)
     },
     // 获取表格选中时的数据
      selectRow(val) {
        this.selectlistRow = val
      },
      // 增加行
      addRow() {
       	  var list = {
          rowNum:this.rowNum,
          name:"",                             
          full_name:"",
          e_name:"",
          h_name:"",
          p_name:"",
          enterprise_prop:"", 
          enterprise_type:"",
          status:"",
          black:"",
          type:"",	
          trade_product:"",
          currency:"",
          certificate:"", 
          certificate_no:"",
          certificate_start:"",
          certificate_end:"",
          province:"",
          address:"",
          invoice_no:"",
          bank:"",
          bank_account:"",
          contact:"",
          contact_cell:"",
          contact_pos:""
   		 };
        this.addcustomertableData.unshift(list)
        this.rowNum += 1;
      },
      // 删除方法
      // 删除选中行
      delData () {
        for (let i = 0; i < this.selectlistRow.length; i++) {
          let val = this.selectlistRow
          val.forEach((val, index) => {
            this.addcustomertableData.forEach((v, i) => {
              if (val.rowNum === v.rowNum) {
                // i 为选中的索引
                this.addcustomertableData.splice(i, 1)
              }
            })
          })
        }
        // 删除完数据之后清除勾选框
        this.$refs.table.clearSelection()
      },
      // 查询币种
      handle_currencyChange(){
       let params = {
            "name": "",
        };
        conCurrency(params).then(res => {
            // if (res.errcode == "1") {
               this.selectCurrencyList = []
                var data1 = res.result
              for (var i = 0; i < data1.length; i++) {
                      this.selectCurrencyList[i] = {
                          currency: data1[i]['id'],
                          name: data1[i]['name']
                      };
                  }
            }).catch(err =>{
          this.$message.error(err.msg);
        });
      },
       // 多选提示
    openMessage() {
      this.$message({
          dangerouslyUseHTMLString: true,
          type: 'error',
          message: '<strong>请勾选你要选择的行，再进行操作！</strong>'
      });
    },
    //  查询
     // 每页数
    // handleSizeChange(val) {
    //   this.cusForm.pageSize = val;
    //   this.cusForm.page = 1;
    //  this.handle_customer();
    // },
    // 当前页
    // handleCurrentChange(val) {
    //   console.log(val);
    //   this.cusForm.page = val;
    //   this.handle_customer();
    // },
    // 查询
    //  handle_customerChange(){
    //   this.cusForm.page = 1;
    //   this.handle_customer();
    // },
    handle_customerChange(){
       concustomer(this.cusForm).then(res => {
            // if (res.errcode == "1") {
                this.customertableData = []
                var data = res.result
                //  this.cusForm.totalPage = res.result.count;
                for (var i = 0; i < data.length; i++) {
                  this.customertableData[i] = {
                    address: data[i].address,
                    bank: data[i].bank,
                    bank_account: data[i].bank_account,
                    bank_branch: data[i].bank_branch,
                    black: data[i].black.toString(),
                    certificate: data[i].certificate.toString(),
                    certificate_end: data[i].certificate_end,
                    certificate_no: data[i].certificate_no,
                    certificate_start: data[i].certificate_start,
                    city: data[i].city,
                    contact: data[i].contact,
                    contact_cell: data[i].contact_cell,
                    contact_email: data[i].contact_email,
                    contact_pos: data[i].contact_pos,
                    country: data[i].country,
                    currency: data[i].currency,
                    currency_name: data[i].currency_name,
                    e_name: data[i].e_name,
                    enterprise_prop: data[i].enterprise_prop.toString(),
                    enterprise_type: data[i].enterprise_type.toString(),
                    full_name: data[i].full_name,
                    h_name: data[i].h_name,
                    id: data[i].id,
                    invoice_no: data[i].invoice_no,
                    name: data[i].name,
                    p_name: data[i].p_name,
                    province: data[i].province,
                    status: data[i].status.toString(),
                    trade_product: data[i].trade_product,
                    type: data[i].type.toString(),
                  }
              }
             }).catch(err =>{
          this.$message.error(err.msg);
        });
    },
    // 新增
    add_customer(){
      this.add_customerVisible = true
      this.handle_currencyChange();
    },
    // 新增保存
    handle_addcustomer(ruleForm){
      let params = {
           "operation":"ADD",
           "customer_data":this.addcustomertableData
        };
      const rule1 = new Promise((resolve, reject) => {
        this.$refs[ruleForm].validate(valid => {
          if (valid) {
            resolve();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      });
      Promise.all([rule1]).then(() => {
         addcustomer(params).then(res => {
            // if (res.errcode === "1") {
                this.$message.success(res.result);
                 this.add_customerVisible = false
                 this.handle_customerChange()
            }).catch(err =>{
          this.$message.error(err.msg);
        });
      });
      
     
    },
    // 修改
     edit_customer(){
        if (this.multipleSelection === undefined) {
          this.openMessage();
      } else if(this.multipleSelection.length != 1){
         this.$message.error("修改只能选中一条数据进行！");
      } else {
         this.edit_customerVisible = true
         console.log(2,this.multipleSelection)
         this.editcustomertableData = this.multipleSelection
          
      }
    },
    // 修改保存
    editcustomer(ruleForm){
      let params = {
           "operation":"MOD",
           "customer_data":this.editcustomertableData[0]
        };
       const rule1 = new Promise((resolve, reject) => {
        this.$refs[ruleForm].validate(valid => {
          if (valid) {
            resolve();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      });
      Promise.all([rule1]).then(() => {
        addcustomer(params).then(res => {
            // if (res.errcode == "1") {
                this.$message.success(res.result);
                 this.edit_customerVisible = false
                 this.handle_customerChange()
            // } else {
            //     this.$message.error(res.msg);
            // }
             }).catch(err =>{
          this.$message.error(err.msg);
        });
      });
    },
    // 删除
     del_customer(){
      console.log(90,this.multipleSelection)
       if(this.multipleSelection == undefined) {
           this.openMessage();
       }else{
         this.delList()
       }
    },
    del_message(){
       var data = this.multipleSelection
       var Newdata  = [];
       data.forEach(function(item, index) {
           var data1 = item.id
           Newdata.push(data1)
           console.log(90,data1,91,Newdata)
        })
         let params = {
            operation: 'DEL',
            customer_data: Newdata
        };
        addcustomer(params).then(res => {
                this.$message.success(res.result);
                 this.handle_customerChange();
            }).catch(err =>{
          this.$message.error(err.msg);
        });
    },
     // 删除提示信息
    delList() {
       this.$confirm('是否删除数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.del_message()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    // 启用/停用
    qycustomer(){
        if (this.multipleSelection == undefined) {
           this.openMessage();
       } else{
          var data = this.multipleSelection
       var Newdata  = [];
       data.forEach(function(item, index) {
           var data1 = item.id
           Newdata.push(data1)
           console.log(90,data1,91,Newdata)
        })
       let params = {
            operation: 'STATUS',
            customer: Newdata
        };
        addcustomer(params).then(res => {
            // if (res.errcode === "1") {
                this.$message.success(res.result);
                 this.handle_customerChange()
            // } else {
            //     this.$message.error(res.msg);
            // }
             }).catch(err =>{
          this.$message.error(err.msg);
        });
       }
    },
    // 刷新
    handleCleanRefreshCurrent(){
      this.cusForm.name="",  
      this.cusForm.type="", 
      this.cusForm.status="",
      this.cusForm.black="",
      this.handle_customerChange();
    },
  },
   mounted() {
     this.handle_currencyChange();
    this.handle_customerChange();
   }
};
</script>
<style></style>
